<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript" src="crowd/my-type.js"></script>
<%@include file="/WEB-INF/modal-type-add.jsp"%>
<%@include file="/WEB-INF/modal-type-edit.jsp"%>
<%@include file="/WEB-INF/modal-type-confirm.jsp"%>
</head>
<script type="text/javascript">

	$(function(){
		
		// 1.为分页操作准备初始化数据
		window.pageNum = 1;
		window.pageSize = 5;
		window.keyword = "";
		
		// 2.调用执行分页的函数，显示分页效果
		generatePage();
		
		// 3.给查询按钮绑定单击响应函数
		$("#searchBtn").click(function(){
			
			// ①获取关键词数据赋值给对应的全局变量
			window.keyword = $("#keywordInput").val();
			
			// ②调用分页函数刷新页面
			generatePage();
			
		});
		
		//打开添加模态框
		$("#showAddModalBtn").click(function(){
			$("#addModal").modal("show");
			
		});
		
		//添加
		$("#saveTypeBtn").click(function(){
			
		
			var typeName = $("#addModal [name='name']").val();
			var remark = $("#addModal [name='remark']").val();
			
			$.ajax({
				"url":"project/type/add.json",
				"data":{
					"name":typeName,
					"remark":remark	
				},
				"type":"post",
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("操作成功！");
						//添加后显示最后一页
						window.pageNum = 999999;
						generatePage();
					}
					if(result=="FAILED"){
						layer.msg("操作失败！"+response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
			});
			//关闭模态框
			$("#addModal").modal("hide");
			//去除输入框内容
			$("#addModal [name='name']").val("");
			$("#addModal [name='remark']").val("");
		});
		
		//弹出编辑模态框
		$("#typePageBody").on("click",".pencilBtn",function(){
			
			$("#editModal").modal("show");
			//获取全局id
			window.typeId= this.id;
			//获得原RolaName
			var remark = $(this).parent().prev().text();
			var typeName = $(this).parent().prev().prev().text();
			$("#editModal [name='name']").val(typeName);
			$("#editModal [name='remark']").val(remark);
		});
		
		//更新type
		$("#editTypeBtn").click(function(){
			var typeName = $("#editModal [name='name']").val();
			var remark = $("#editModal [name='remark']").val();
			$.ajax({
				
				"url":"project/type/edit.json",
				"data":{
					"id":window.typeId,
					"name":typeName,
					"remark":remark
				},
				"type":"post",
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("操作成功！");
						generatePage();
					}
					if(result=="FAILED"){
						layer.msg("操作失败！"+response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
			});
			//关闭模态框
			$("#editModal").modal("hide");
		});
		

		//执行删除
		$("#delTypeBtn").click(function(){
			// 从全局变量范围获取typeIdArray，转换为JSON字符串
			var ids = JSON.stringify(window.typeIdArray);
			
			$.ajax({
				"url":"project/type/remove/by/id/array.json",
				"data":ids,
				"type":"post",
				"contentType":"application/json;charset=UTF-8",
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("操作成功！");
						generatePage();
					}
					if(result=="FAILED"){
						layer.msg("操作失败！"+response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
				
			});

			// 关闭模态框
			$("#confirmModal").modal("hide");
			//将全选框置为未选择状态
			$("#summaryBox").prop("checked",false);
			
		});
		
		//单条删除数据
		$("#typePageBody").on("click",".removeBtn",function(){
			var typeId = this.id;
			var typeName = $(this).parent().prev().prev().text();
			
			var typeArray=[{
				"typeId":typeId,
				"typeName":typeName
			}];
			showConfirmModal(typeArray);
		});
		
		//给全选绑定单击事件
		$("#summaryBox").click(function(){
			// ①获取当前多选框自身的状态
			var currentStatus = this.checked;
			
			// ②用当前多选框的状态设置其他多选框
			$(".itemBox").prop("checked", currentStatus);
			
		});
		
		//判断全选/全不选
		$("#typePageBody").on("click",".itemBox",function(){
			var checkedBoxCount = $(".itemBox:checked").length;
			var totalCount = $(".itemBox").length;
			$("#summaryBox").prop("checked",checkedBoxCount==totalCount);
		});
		
		//批量删除数据
		$("#batchRemoveBtn").click(function(){
			var typeArray = [];
			$(".itemBox:checked").each(function(){
				var typeId = this.id;
				//alert(typeId);
				var typeName = $(this).parent().next().text();
				typeArray.push({
					"typeId":typeId,
					"typeName":typeName
				});
			});
			//未选择给出提示
			if($(".itemBox:checked").length==0){
				layer.msg("请选择至少一条数据进行删除！");
			}
			//显示删除数据
			showConfirmModal(typeArray);
		});
		
	});

</script>
<body>

   <%@ include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
		<%@ include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="glyphicon glyphicon-th"></i> 数据列表
						</h3>
					</div>
					<div class="panel-body">
						<form class="form-inline" role="form" style="float: left;">
							<div class="form-group has-feedback">
								<div class="input-group">
									<div class="input-group-addon">查询条件</div>
									<input id="keywordInput" class="form-control has-success" type="text"
										placeholder="请输入查询条件">
								</div>
							</div>
							<button id="searchBtn" type="button" class="btn btn-warning">
								<i class="glyphicon glyphicon-search"></i> 查询
							</button>
						</form>
						
							<button id="batchRemoveBtn" type="button" class="btn btn-danger"
								style="float: right; margin-left: 10px;">
								<i class=" glyphicon glyphicon-remove"></i> 删除
							</button>
							<button 
								type="button" 
								id="showAddModalBtn" class="btn btn-primary"
								style="float: right;">
								<i class="glyphicon glyphicon-plus"></i> 新增
							</button>
						<br>
						<hr style="clear: both;">
						<div class="table-responsive">
							<table class="table  table-bordered">
								<thead>
									<tr >
					                  <th width="30">#</th>
									  <th width="30"><input id="summaryBox" type="checkbox"></th>
					                  <th width="200">分类名称</th>
					                  <th>简介</th>
					                  <th width="200">操作</th>
					                </tr>
								</thead>
								<tbody id="typePageBody"></tbody>
								<tfoot>
									<tr>
										<td colspan="6" align="center">
											<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	

</html>
